<div id="wrap">
  <!-- <div id="nav-bar"> -->
    <div class="pull-left">
      <div id="header-container">
        <h5><strong>SÂN BÓNG</strong></h5>
        <div class="dropdown"> <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#"> <b><span class="namefootballmaches"  STYLE="color: white; font-size: 20pt"></span></b> <b class="caret"></b> </a>
          <ul class="dropdown-menu">
            <li><a href="/football/News.html">News</a></li>
            <li><a href="/football/Footballer.html">Footballer</a></li>
            <li><a href="/football/FavouriteTeam.html">Favourite team</a></li>
            <li><a href="/football/Match.html">Match</a></li>
            <li class="divider"></li>
            <li><a href="/football/index.html">Home</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="pull-right">
      <div id="top-info" class="pull-right"> <a id="settings" href="#" class="win-command pull-right"> </a> <a id="logged-user" href="#" class="win-command pull-right"> </a>
        <div class="pull-left">
          <h3>FirstName</h3>
          <h4>LastName</h4>
          
        </div>
      </div>
    </div>
  </div>
  <div class="metro panorama">
    <div class="panorama-sections">
      <div class="panorama-section">
        <h2><a class="title" href="/football/News.html">Thông tin hai d?i</a></h2>
        <div class="tile-column-span-1 jtile-column-span-1 jfirst"> <a class="tile squarepeek jsquarepeek" href="#"> <img id="my_image_teama" src="" >
          <h2><span class="teama"> <br /></span>
            </h2>
          <table>
            <tr>
              <td width="150">T?ng s? di?m</td>
              <td><span class="teamascoretotal"></span></td>
            </tr>
            <tr>
              <td>T?ng tr?n th?ng</td>
              <td><span class="teamawintotal"></span></td>
              
            </tr>
            <tr>
              <td>T?ng tr?n hòa</td>
              <td><span class="teamadrawtotal"></span></td>
              
            </tr>
            <tr>
              <td>T?ng tr?n thua</td>
              <td><span class="teamadefeattotal"></span></td>
              
            </tr>
          </table>
          </a> </div>
        <div class="tile-column-span-1 jtile-column-span-1 jlast"> <a class="tile squarepeek jsquarepeek" href="#"> <img id="my_image_teamb" src="" >
         <h2><span class="teamb"> <br /></span>
            </h2>
          <table>
            <tr>
              <td width="150">T?ng s? di?m</td>
              <td><span class="teambscoretotal"></span></td>
            </tr>
            <tr>
              <td>T?ng tr?n th?ng</td>
              <td><span class="teambwintotal"></span></td>
              
            </tr>
            <tr>
              <td>T?ng tr?n hòa</td>
              <td><span class="teambdrawtotal"></span></td>
              
            </tr>
            <tr>
              <td>T?ng tr?n thua</td>
              <td><span class="teambdefeattotal"></span></td>
              
            </tr>
          </table>
          </a> </div>
          
        <div class="tile-column-span-2"><strong>
       ĐÃ HẾT THỜI GIAN DỰ ĐOÁN TRẬN ĐẤU</strong>
          <div class="contentfail" id="iddivawin">
          
           <div id="Popup_invite" ></div>
            <div id="Popup_invite_ok"></div>
            <div id="Popup_invite_success"></div>
            <h3><span class="teamapredict"></span></h3>
            <p><span class="rateteambwintotal"></span></p>
            <p><span class="countteambwintotal"></span></p>
             <div class="id_100"> 
           
                     </div> 
                   
          </div>
          
          <div class="contentdraw"  id="iddivadraw">
            <h3><span class="teamabpredict"></span></h3>
            <p><span class="rateteambdrawtotal"></span></p>
            <p><span class="countteambdrawtotal"></span></p>
            <div class="id_101">
            </div>
          </div>
        <div class="contentwin" id="iddivb_win">
            <h3><span class="teambpredict"></span></h3>
            <p><span class="rateteambdrawwintotal"></span></p>
            <p><span class="countteambdrawwintotal"></span></p>
            <div class="id_102">
           </div>
                    
          </div>
        </div>
        
      </div>

      <div class="panorama-section">
        <div class="tile-column-span-3">
          <h2 style="margin-left:100px;"><a class="title" href="/football/Schedule.php">BÌNH LU?N V? TR?N Ð?U</a></h2>
          <div id="posting" style="width:400px; margin-left:100px; height:343px; background:#fff; padding: 0 10px; overflow:scroll">
          	<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=162168433969488";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
				<!-- <div class="fb-comments" data-href="http://example.com" data-width="380"></div> -->
          </div>
        </div>
      </div>
      <div class="panorama-section">
        <div class="tile-column-span-3">
          <h2><a class="title" href="/football/Schedule.php">DANH SÁCH THÀNH VIÊN D? ÐOÁN</a></h2>
          <div id="predictlistmembers"></div>
          <!-- <div id="playvideo"></div> -->
          <!-- <object type="application/x-shockwave-flash" id="playerObject">
  <param name="movie" value="http://www.youtube.com/apiplayer?&enablejsapi=1"></param>
  <param name="allowScriptAccess" value="always"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="wmode" value="transparent"></param>
</object> -->
<!-- <div id="videoContainer">
  <iframe width="450" height="283" src="https://www.youtube.com/embed/VIDEO_ID_HERE?wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>
</div>
 <a class="introVid" href="#video">Watch the video</a></p>-->
          <!-- <table class="scheduleTable" >
            <tr>
              <th>TH?I GIAN</th>
              <th>THÀNH VIÊN</th>
              <th>CH?N</th>
              <th>S? ÐI?M</th>
            </tr>
            <tr>
              <td colspan="4" class="jhead">TOP 5 THÀNH VIÊN D? ÐOÁN</td>
            </tr>
            <tr>
              <td>10:30 - 10/8</td>
              <td>nguyen tuan</td>
              <td>Nottingham</td>
              <td>30.000 di?m</td>
            </tr>
            <tr>
              <td>10:30 - 10/8</td>
              <td>nguyen tuan</td>
              <td>Nottingham</td>
              <td>30.000 di?m</td>
            </tr>
            <tr>
              <td>10:30 - 10/8</td>
              <td>nguyen tuan</td>
              <td>Nottingham</td>
              <td>30.000 di?m</td>
            </tr>
            <tr>
              <td>10:30 - 10/8</td>
              <td>nguyen tuan</td>
              <td>Nottingham</td>
              <td>30.000 di?m</td>
            </tr>
            <tr>
              <td>10:30 - 10/8</td>
              <td>nguyen tuan</td>
              <td>Nottingham</td>
              <td>30.000 di?m</td>
            </tr> -->
           <!--  <tr>
              <td colspan="4" class="jhead">THÀNH VIÊN V?A D? ÐOÁN</td>
            </tr>
            <tr>
              <td>10:30 - 10/8</td>
              <td>nguyen tuan</td>
              <td>Nottingham</td>
              <td>30.000 di?m</td>
            </tr>
            <tr>
              <td>10:30 - 10/8</td>
              <td>nguyen tuan</td>
              <td>Nottingham</td>
              <td>30.000 di?m</td>
            </tr>
            <tr>
              <td>10:30 - 10/8</td>
              <td>nguyen tuan</td>
              <td>Nottingham</td>
              <td>30.000 di?m</td>
            </tr>
            <tr>
              <td>10:30 - 10/8</td>
              <td>nguyen tuan</td>
              <td>Nottingham</td>
              <td>30.000 di?m</td>
            </tr> 
          </table>-->
        </div>
        <div class="tile-column-span-3">
          <!-- <h2><a style="margin-left: 100px" class="title" href="/football/Schedule.php">L?CH S? GIAO LUU</a></h2>
            <div style="margin-left: 100px" id="historypredictlistmembers"></div> -->
          <!-- <table class="scheduleTable" style="width:500px" >
            <tr>
              <th width="85">TH?I GIAN</th>
              <th>DI?N BI?N</th>
            </tr>
            <tr>
              <td colspan="2" class="jhead">HI?P 1</td>
            </tr>
            <tr>
              <td>1'</td>
              <td>Tr?n d?u b?t d?u!</td>
            </tr>
            <tr>
              <td>9'</td>
              <td>Tr?n d?u b?t d?u!</td>
            </tr>
            <tr>
              <td>12'</td>
              <td>Tr?n d?u b?t d?u!</td>
            </tr>
            <tr>
              <td>15'</td>
              <td>Tr?n d?u b?t d?u!</td>
            </tr>
            <tr>
              <td colspan="2" class="jhead">HI?P 2</td>
            </tr>
            <tr>
              <td>15'</td>
              <td>Tr?n d?u b?t d?u!</td>
            </tr>
            <tr>
              <td>15'</td>
              <td>Tr?n d?u b?t d?u!</td>
            </tr>
            <tr>
              <td>15'</td>
              <td>Tr?n d?u b?t d?u!</td>
            </tr>
            <tr>
              <td>15'</td>
              <td>Tr?n d?u b?t d?u!</td>
            </tr>
            <tr>
              <td>15'</td>
              <td>Tr?n d?u b?t d?u!</td>
            </tr>
          </table> -->
        </div>
      </div>
    </div>
  </div>
  <a style="display: block;" id="panorama-scroll-prev" href="#"></a> <a id="panorama-scroll-next" href="#"></a>
  <div id="panorama-scroll-prev-bkg" onMouseOver="jshowMenu(this)" onMouseOut="jhideMenu(this)">
  	<div class="jmenuWrap">
        <div class="jmenu">
            <h2>B?N CÓ MU?N?</h2>
            <div class="jmenu-content">
                <a href="#"><img src="images/back2top.jpg" onClick="jscrollTo(0)"></a>
                <a href="#"><img src="images/back2expected.jpg" onClick="jscrollTo(2000)"></a>
				 <a href="#"><img src="images/back2expected.jpg" onClick="jscrollTo(2000)"></a>
            </div>
        </div>
    </div>
  </div>
  
  <div id="panorama-scroll-next-bkg" onMouseOver="jshowMenu(this)" onMouseOut="jhideMenu(this)">
		<div class="jmenuWrap">
        <div class="jmenu">
            <h2>V? TRANG</h2>
            <div class="jmenu-content">
                <a href="#"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/img/back2top.jpg" onClick="jscrollTo(0)"></a>
                <a href="#"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/img/back2expected.jpg" onClick="jscrollTo(2000)"></a>
            </div>
        </div>
    </div>
  </div>
</div>
<div id="charms" class="win-ui-dark slide">
  <div id="theme-charms-section" class="charms-section">
    <div class="charms-header"> <a href="#" class="close-charms win-backbutton"></a>
      <h2>Log in</h2>
    </div>
    <div class="row-fluid">
      <div class="span12">
        <form class="">
          <label for="win-theme-select">Please give me your infomation</label>
          <select id="win-theme-select" class="">
            <option value="metro-ui-light">Light</option>
            <option selected="selected" value="metro-ui-dark">Dark</option>
          </select>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Grab Google CDN's jQuery. fall back to local if necessary --> 

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/bootstrap.js"></script> 
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/bootmetro-panorama.js"></script> 
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/bootmetro-pivot.js"></script> 
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/bootmetro-charms.js"></script> 
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/bootstrap-datepicker.js"></script> 
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/jquery.js"></script> 
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/jquery_002.js"></script> 
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/holder.js"></script> 
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/demo.js"></script> 

<script type="text/javascript">

      jQuery('.panorama').panorama({
         //nicescroll: false,
         showscrollbuttons: true,
         keyboard: true,
         parallax: true
      });

      jQuery('#pivot').pivot();

   </script>